import React, { useState, useEffect } from "react";
import { NavBar, Toast } from "antd-mobile";
import { useNavigate, useLocation } from "react-router";
import {
  hotMoviedetail,
  commentAdd,
  favoriteAdd,
  likeAdd,
} from "../../service/movieService";
interface DetailListData {
  cover?: string;
  name?: string;
  playDate?: string;
  id?: string;
  introduction: string;
  language: string;
}
export default function HotMovieDetile() {
  const history = useNavigate();
  let localtion = useLocation();
  let [detailList, setDetailList] = useState<DetailListData>({
    introduction: "",
    language: "",
  });
  let [flag, setFlag] = useState(false);
  let [flagwant, setFlagwant] = useState(false);
  let [flagfnish, setFlagfnish] = useState(false);
  const back = () => history(-1);
  let id = localtion.pathname.substr(localtion.pathname.length - 1, 1);
  // console.log(id);

  useEffect(() => {
    (async () => {
      let res = await hotMoviedetail(id);
      setDetailList(res.data.data);
      console.log(res.data.data);
    })();
  }, []);

  return (
    <div className="movieDetail-box-bg">
      <div>
        <NavBar onBack={back}>电影详情</NavBar>
      </div>
      <div className="movieDetail-box">
        <div className="img">
          <img src={"/api2" + detailList.cover} alt="电影图片"></img>
        </div>
        <div className="info">
          <div className="name">{detailList.name}</div>
          <div className="playDate">悬疑 / 喜剧 / 剧情</div>
          <div className="playDate">
            上映时间:{detailList.playDate}/{detailList.language}
          </div>
          <div className="btns">
            <div
              className={!flagwant ? "want" : "want-red"}
              onClick={async () => {
                let res = await likeAdd(detailList.id);
                if (res.data.code == 200) {
                  Toast.show({
                    icon: "success",
                    content: res.data.msg,
                  });
                  setFlagwant(true);
                } else {
                  Toast.show({
                    icon: "fail",
                    content: res.data.msg,
                  });
                  setFlagwant(!flagwant);
                }
                console.log(res);
              }}
            >
              <img
                src="//obj.pipi.cn/festatic/asgard/resources/images/movie/want-to-watch.png"
                alt="想看"
              />
              <span>想看</span>
            </div>
            <div
              className={!flagfnish ? "finish" : "finish-red"}
              onClick={async () => {
                let res = await favoriteAdd(detailList.id);
                if (res.data.code == 200) {
                  Toast.show({
                    icon: "success",
                    content: res.data.msg,
                  });
                  setFlagfnish(true);
                } else {
                  Toast.show({
                    icon: "fail",
                    content: res.data.msg,
                  });
                  setFlagfnish(!flagfnish);
                }
                console.log(res);
              }}
            >
              <img
                src="//obj.pipi.cn/festatic/asgard/resources/images/movie/star.png"
                alt="看过"
              />
              <span>看过</span>
            </div>
          </div>
        </div>
      </div>

      <div className="intro">
        <div className="intro-top">
          <div className="intro-name">简介</div>
          <div
            onClick={() => {
              setFlag(!flag);
            }}
          >
            {!flag ? "展开" : "收齐"}
          </div>
        </div>
        <div
          className={flag ? "intro-open" : "intro-close"}
          dangerouslySetInnerHTML={{ __html: detailList.introduction }}
        ></div>
      </div>

      <div className="comment-box">
        <div className="comment-top">
          <div className="comment">讨论</div>
          <div
            className="comment-btn"
            onClick={() => history("/movie/comment")}
          >
            参与讨论
          </div>
        </div>
        <div className="comment-list"></div>
      </div>
    </div>
  );
}
